<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改
        </el-button>
      </el-col>
    </el-row>


    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="id" prop="id" width="250" v-if="false"/>
      <el-table-column label="仓库" prop="wareHouse"/>
      <el-table-column label="Truck Pick Up-提货费" prop="truckPickUp"/>
      <el-table-column label="Pier Pass-疏港费" prop="pierPass"/>
      <el-table-column label="Chassis fee-车架费" prop="chassisFee"/>
      <el-table-column label="Clean Truck-清洁费" prop="cleanTruck"/>
      <el-table-column label="Demurrage-滞期费" prop="demurrage"/>
      <el-table-column label="Per Diem-箱使费" prop="perDiem"/>
      <el-table-column label="Pre Pull-预提费" prop="prePull"/>
      <el-table-column label="Yard Storage-过夜费" prop="yardStorage"/>
      <el-table-column label="Drop Off drop load费" prop="dropOffLoad"/>
      <el-table-column label="Waiting Fee-等候费" prop="waitingFree"/>
      <el-table-column label="Chassis split-底盘分离费" prop="chassisSplit"/>
      <el-table-column label="超重-42000lbs-48000lbs" prop="small"/>
      <el-table-column label="超重-42000lbs-48000lbs" prop="medium"/>
      <el-table-column label="超重-48000lbs-52000lbs" prop="big"/>
    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1000px"
      append-to-body
      class="contract-dialog"
      @close="cancel">

      <!-- 新增拖柜弹窗 -->
      <el-form ref="form" :model="form" class="compact-form">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库" prop="wareHouse" class="form-item-compact">
              <el-input v-model="form.wareHouse" placeholder="请输入仓库" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Truck Pick Up提货费" prop="truckPickUp" class="form-item-compact">
              <el-input v-model="form.truckPickUp" placeholder="请输入提货费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Pier Pass疏港费" prop="pierPass" class="form-item-compact">
              <el-input v-model="form.pierPass" placeholder="请输入疏港费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Chassis Fee车架使用费" prop="chassisFee" class="form-item-compact">
              <el-input v-model="form.chassisFee" placeholder="请输入车架使用费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Clean Truck清洁费" prop="cleanTruck" class="form-item-compact">
              <el-input v-model="form.cleanTruck" placeholder="请输入清洁费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Demurrage滞期费" prop="demurrage" class="form-item-compact">
              <el-input v-model="form.demurrage" placeholder="请输入滞期费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Per Diem箱使费" prop="perDiem" class="form-item-compact">
              <el-input v-model="form.perDiem" placeholder="请输入箱使费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Pre Pull预提费" prop="prePull" class="form-item-compact">
              <el-input v-model="form.prePull" placeholder="请输入预提费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Yard Storage过夜费" prop="yardStorage" class="form-item-compact">
              <el-input v-model="form.yardStorage" placeholder="请输入过夜费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="drop Off Load费" prop="dropOffLoad" class="form-item-compact">
              <el-input v-model="form.dropOffLoad" placeholder="请输入drop Off Load费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第六行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="Waiting Free等候费" prop="waitingFree" class="form-item-compact">
              <el-input v-model="form.waitingFree" placeholder="请输入等候费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Chassis Split底盘分离费" prop="chassisSplit" class="form-item-compact">
              <el-input v-model="form.chassisSplit" placeholder="请输入底盘分离费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第七行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="超重费-42000lbs-48000lbs" prop="small" class="form-item-compact">
              <el-input v-model="form.small" placeholder="请输入超重费" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" 超重费-48000lbs-52000lbs" prop="medium" class="form-item-compact">
              <el-input v-model="form.medium" placeholder="请输入超重费" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第八行 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="超重费-52000lbs-56000lbs" prop="big" class="form-item-compact">
              <el-input v-model="form.big" placeholder="请输入超重费" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>

</template>

<script>

import {getList,addOrUpdate,deleteByIds} from '@/api/amac/dragging/dragging'

export default {
  name: "Role",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      pictureDetails: false,  // 控制弹窗显示
      srcList: [],  // 存储图片路径的数组
      currentIndex: 0,  // 当前显示图片的索引
      // 菜单列表
      menuOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      // 图片数量限制
      limit: 3,
      //图片地址
      imageUrl: "",
      // 表单参数
      // 表单参数
      form: {},

      // ... existing data properties ...
      selectedMonth: '', // 当前选择的月份
      submitting: false, // 控制提交按钮的加载状态
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    // 🔽 页面加载时自动调用
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form =  {
        wareHouse: undefined,
        truckPickUp: undefined,
        pierPass: undefined,
        chassisFee: undefined,
        cleanTruck: undefined,
        demurrage: undefined,
        perDiem: undefined,
        prePull: undefined,
        yardStorage: undefined,
        dropOffLoad: undefined,
        waitingFree: undefined,
        chassisSplit: undefined,
        small: undefined,
        medium: undefined,
        big: undefined,
      }
    },
    //
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList();
    },
    /** 重置按钮操作 */
    searchReset() {
      this.queryParams.pageNum = 1
      this.queryParams = {}
      this.getList();
    },
    /** 查询列表 */
    getList() {
      getList().then(response => {
        if (!response.rows) return false
        this.roleList = response.rows
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleAdd(){
      this.open = true;
      this.title = "新增拖柜信息";
    },
    handleUpdate(){
      const selected = this.roleList.find(item => item.id === this.ids[0]);
      console.log("123",selected)
      if (!selected) return;

      this.form = { ...selected };  // 深拷贝到表单
      this.title = "修改拖柜信息";
      this.open = true;
    },
    handleDelete(){
      this.$confirm("确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteByIds(this.ids).then(res => {
          this.$message.success("删除成功");
          this.getList();
        }).catch(() => {
          this.$message.error("删除失败");
        });
      }).catch(() => {
        // 用户点击取消
      });
    },
    /**
     * 新增和修改的确认按钮
     */
    submitForm() {
      this.submitting = true;
      console.log("this.form.id", this.form.id);

      addOrUpdate(this.form)  // 不管是新增还是修改，统一走这个方法
        .then(res => {
          this.$message.success(this.form.id ? "修改成功" : "新增成功");
          this.open = false;
          this.getList();
        })
        .finally(() => {
          this.submitting = false;
        });
    }
  },


};
</script>
<style>
/* 弹窗整体样式 */
.contract-dialog {
  font-family: "Microsoft YaHei", sans-serif;
}

/* 紧凑型表单样式 */
.compact-form {
  padding: 20px 30px;
}

/* 表单项样式 */
.form-item-compact {
  margin-bottom: 18px;
}
.form-item-compact .el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
  color: #606266;
  font-weight: normal;
}
.form-item-compact .el-input {
  width: 100%;
  min-width: 180px;
}

/* 底部按钮样式 */
.dialog-footer {
  text-align: center;
  padding: 15px 0 0;
}
.dialog-footer .el-button {
  min-width: 100px;
  margin: 0 10px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .contract-dialog {
    width: 90% !important;
  }
  .form-item-compact .el-input {
    min-width: 150px;
  }
}
</style>
